<!DOCTYPE html>
<html>

<head>
    <title>02 - Advanced</title>
    <script src="cfxnes.js"></script>
</head>
<style type="text/css">
    body {
        text-align: center;
        padding: 0;
        margin: 0;
    }

    input {
        display: none;
    }
</style>

<body>
    <div>
        <canvas id="cfxnes"></canvas>
    </div>
    <div>
        <input id="input" type="file">
        <button onclick="input.click()">Open ROM</button>
        <button onclick="nes.start()">Start</button>
        <button onclick="nes.stop()">Stop</button>
        <button onclick="nes.power()">Power</button>
        <button onclick="nes.reset()">Reset</button>
    </div>
    <div id="fps"></div>
    <script>
        var nes = cfxnes({
            video: {
                scale: 1,
            },
            audio: {
                enabled: false,
            },
        });
        var input = document.getElementById('input');
        var fps = document.getElementById('fps');

        input.onchange = function (event) {
            var file = event.target.files[0];
            if (file) {
                nes.rom.load(file).then(nes.start);
            }
        };
		nes.rom.load("SuperMario.nes").then(nes.start);
        setInterval(function () {
            fps.innerHTML = nes.running ? ('FPS: ' + ~~nes.fps) : '';
        }, 500);
    </script>
</body>

</html>